<template>
  <div class="user-container">
    <el-card class="user-select" shadow="never">
      <!--    输入框盒子-->
      <div class="user-inputBar">
        <div class="Select">
          <!--          账 号：-->
        账号:  <el-input label="账号" clearable placeholder="账号" prefix-icon="el-icon-user" v-model="account"
                    class="userMessage" @input="handleQuery"></el-input>
          <!--          姓 名：-->
          姓名： <el-input label="姓名" clearable placeholder="姓名" prefix-icon="el-icon-user" v-model="name"
                    class="userMessage" @input="handleQuery"></el-input>
          <el-button type="primary" class="user-SelectButton" icon="el-icon-search" @click="this.handleQuery">查 询
          </el-button>
        </div>
      </div>
    </el-card>
    <el-card class="container" shadow="never">
      <div class="user-tableButton">
        <el-button type="primary" size="mini" @click="handleEditAndAdd(null)">+添加</el-button>
        <el-button type="danger" size="mini" @click="handleDelete('批量',null)">批量删除</el-button>
      </div>
      <!--    表格-->
      <el-table
          :data="userData"
          :border=true
          stripe
          :fit=true
          highlight-selection-row
          v-loading="loading"
          empty-text="数据失踪了~重新再试试吧"
          @selection-change="handleSelectionChange"
      >
        <el-table-column
            type="selection"
            align="center"
            :selectable="checkSelection"
            min-width="55px"
            fixed
        >
        </el-table-column>
        <el-table-column
            prop="id"
            label="id"
            show-overflow-tooltip
            align="center" min-width="150px">
        </el-table-column>
        <el-table-column
            prop="account"
            label="账号"
            align="center" min-width="100px">
        </el-table-column>
        <el-table-column
            prop="name"
            label="姓名" align="center" min-width="100px">
        </el-table-column>
        <el-table-column
            prop="phone"
            label="手机号" align="center" min-width="150px">
        </el-table-column>
        <el-table-column
            prop="sex"
            label="性别"
            min-width="55px" align="center">
          <template v-slot="scope">
            {{ scope.row.sex === 0 ? '女' : '男' }}
          </template>
        </el-table-column>
        <el-table-column
            prop="idNumber"
            label="身份证号"
            align="center" min-width="180px">
        </el-table-column>
        <el-table-column
            prop="roleName"
            label="权限"
            align="center" min-width="100px">
          <template v-slot="scope">
            <el-tag :type="getRoleTagType(scope.row.roleName)">{{scope.row.roleName}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
            prop="createTime"
            label="创建时间"
            align="center" min-width="150px">
        </el-table-column>
        <el-table-column
            prop="updateTime"
            label="修改时间"
            align="center" min-width="150px">
        </el-table-column>
        <el-table-column label="操作" align="center" min-width="200px">
          <template slot-scope="scope">
            <el-button
                size="mini" type="text" v-show="scope.row.account!=='super'" @click="handleEditAndAdd(scope.row.id)">编辑
            </el-button>
            <el-button
                size="mini" type="text"
                @click="updateUserStatus(scope.row.id,scope.row.status)"
                v-show="scope.row.account!=='super'" style="color: orangered">
              {{ scope.row.status === 1 ? '禁用' : '启用' }}
            </el-button>
            <el-button
                size="mini"
                type="text"
                v-show="scope.row.account!=='super'"
                style="color: red"
                @click="handleDelete('one',scope.row.id)"
            >删除
            </el-button>
            <el-button
                size="mini"
                type="text"
                v-show="scope.row.account!=='super'"
                @click="handleResetPassword(scope.row.id)"
            >重置密码
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--    分页组件-->
      <el-pagination
          :page-sizes="[5, 10, 20,50,100]"
          :page-size="this.pageSize"
          :current-page="this.page"
          layout="total, sizes, prev, pager, next, jumper"
          :total="this.counts"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange">
      </el-pagination>
    </el-card>
    <AddUser></AddUser>
  </div>

</template>


<script>
import { axios } from 'axios'
import { DeleteUserApi, GetUserListApi, ResetUserPasswordApi, UpdateUserStatusApi } from '@/request/user/user-api'
import AddUser from '@/components/user/AddUser.vue'
import store from '@/store'

export default {
  components: { AddUser },
  data () {
    return {
      isVisible: false,
      editUserId: '',
      account: '',
      name: '',
      userData: [],  //用户数据
      counts: 0,     //总数
      page: 1,      //当前页
      pageSize: 10, //每页个数
      checkList: [],  //多选
      loading: true
    }
  },
  created () {
    this.init()
  },
  methods: {
    async init () {
      this.loading = true
      const params = {
        page: this.page,
        pageSize: this.pageSize,
        account: this.account ? this.account : undefined,
        name: this.name ? this.name : undefined
      }
      let res = await GetUserListApi(params)
      if (res.code === 200) {
        this.userData = res.data.records || []
        this.counts = res.data.total
        this.loading = false
      } else {
        this.$message.error(res.msg)
        this.loading = false
      }
    },
    checkSelection (row) {
      return row.account !== 'super'
    },
    //修改用户状态
    updateUserStatus (id, status) {
      this.$confirm('确认调整该账号的状态?', '提示', {
        'confirmButtonText': '确定',
        'cancelButtonText': '取消',
        'type': 'warning'
      }).then(async () => {
        status = (status === 1) ? 0 : 1
        let res = await UpdateUserStatusApi(id, status)
        if (res.code === 200) {
          this.$message.success('修改状态成功')
          this.handleQuery()
        } else {
          this.$message.error(res.msg)
        }
      }).catch(() => {
        this.$message.info('取消修改用户状态')
      })
    },
    //删除用户
    handleDelete (type, id) {
      if (type === '批量' && id === null) {
        if (this.checkList.length === 0) {
          return this.$message.error('请选择删除对象')
        }
      }
      this.$confirm('确认删除用户, 是否继续?', '确定删除', {
        'confirmButtonText': '确定',
        'cancelButtonText': '取消',
        'type': 'warning'
      }).then(async () => {
        let ids = (type === '批量') ? this.checkList.join(',') : id
        //选择确定走这里
        let res = await DeleteUserApi(ids)
        if (res.code === 200) {
          this.handleQuery()
          this.$message.success('删除成功')
        } else {
          this.$message.error(res.msg)
        }
      }).catch(() => {
        this.$message.info('取消删除')
      })
    },
    handleResetPassword (id) {
      this.$confirm('确认重置密码, 是否继续?', '确定重置', {
        'confirmButtonText': '确定',
        'cancelButtonText': '取消',
        'type': 'warning'
      }).then(async () => {
        let res = await ResetUserPasswordApi(id)
        if (res.code === 200) {
          this.$message.success('重置成功')
        }
      }).catch(() => {
        this.$message.info('取消重置')
      })
    },
    handleSelectionChange (val) {
      let checkArr = []
      val.forEach((n) => {
        checkArr.push(n.id)
      })
      this.checkList = checkArr
    },
    handleEditAndAdd (id) {
      store.commit('userEditData/changeIsVisible', true)
      store.commit('userEditData/changeEditUserId', id)
    },
    handleQuery () {
      this.page = 1
      this.init()
    },
    handleSizeChange (val) {
      this.pageSize = val
      this.init()
    },
    handleCurrentChange (val) {
      this.page = val
      this.init()
    },getRoleTagType(roleName){
     return  roleName==="超级管理员"?"danger":roleName==="管理员"?"warning":roleName==="普通用户"?'success':""
    }
  }
}
</script>
<style lang="less" scoped>
.user-container {
  .user-select {
    margin-bottom: 10px;
    .user-inputBar {
      font-size: 14px;
      .Select {
        .userMessage {
          width: 200px;
          margin-right: 20px;
        }
      }
    }
  }

  .container {
    .user-tableButton {
      float: right;
      margin: 10px 0 10px 10px;
    }
    .el-pagination {
      text-align: center;
      margin: 15px;
    }
  }
}
</style>
